<template>
  <div>
    <div id="echarts_test01" style="width: 600px; height: 400px"></div>

    <div id="chartColumn" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartColumn: null,
    };
  },
  name: "Dashboard",
  mounted() {
    this.drawLine();
    let myChart = this.$echarts.init(document.getElementById("echarts_test01"));
    let option = {
      title: {
        text: "Echarts入门实例",
      },

      tooltip: {},

      legend: {
        data: ["销量"],
      },

      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },

      yAxis: {},

      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    myChart.setOption(option);
  },

  methods: {
    drawLine() {
      this.chartColumn = this.$echarts.init(document.getElementById("chartColumn"));

      this.chartColumn.setOption({
        title: { text: "Column Chart" },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross", label: { backgroundColor: "#76baf1" } },
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
          },
        ],
      });
    },
  },



};
</script>

<style>
</style>